<template>
  <div>
    <el-row>
      <el-col :span="3">
        <div style="padding: 8px">
          <div v-for="item in fileList" :key="item" @click="clickFile(item)" style="cursor: pointer">{{ item }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="padding: 8px">
          <div>
            <span>列表路径： </span>
            <el-input :value="dataDesc.main_list" style="width: 280px"></el-input>
            <!-- 路径探测 -->
            <el-button @click="getPathOuter">getpath</el-button>
            <!-- 数据解析 -->
            <el-button @click="parseData">parse</el-button>
          </div>
          <div style="overflow-y: auto; max-height: 120px">
            <div v-for="(item, i) in dataDesc.item_desc" :key="i">{{ item.name }}--{{ item.type }}</div>
          </div>
          <div>
            <el-input :value="item_descStr" type="textarea" :rows="4"></el-input>
          </div>
          <view-table :item_desc="dataDesc.item_desc" :tableData="dataList"></view-table>
        </div>
      </el-col>
      <el-col :span="9">
        <div style="padding: 8px">
          <el-input :value="dataStr" type="textarea" :rows="30"></el-input>
        </div>
      </el-col>
    </el-row>
    <div></div>
  </div>
</template>

<script>
import axios from '../common/request';
import ViewTable from '../components/ViewTable.vue';

export default {
  components: { ViewTable },
  data() {
    return {
      fileList: [
        'full.json',
        'policy.json',
        'energyRanking.json',
        'openFile_list.json',
        'firstRow.json',
        'EnergyConsum.json',
        'nodeNpm.json',
      ],

      data01: {},

      dataList: [],

      dataDesc: {
        main_list: '',
        item_desc: [],
        typeMap: {
          avatar: 'image',
          policyInfo: 'textarea',
          files: 'textarea',
        },
      },
    };
  },
  computed: {
    dataStr() {
      return JSON.stringify(this.data01, null, 2);
    },
    item_descStr() {
      return JSON.stringify(this.dataDesc.item_desc, null, 2);
    },
  },
  methods: {
    clickFile(param) {
      const url = '/assets/' + param;
      this.getData(url).then(() => {
        this.getPathOuter();
      });
    },
    getData(url) {
      return axios.get(url).then(res => {
        this.data01 = res.data;
      });
    },
    getPathOuter() {
      const aaa = this.getPathTrue(this.data01, '');
      this.dataDesc.main_list = aaa;
    },
    getPathTrue(param, pathCur) {
      if (!pathCur) {
        pathCur = '';
      }
      if (param instanceof Array) {
        return '';
      }
      for (const key in param) {
        if (Object.prototype.hasOwnProperty.call(param, key)) {
          const element = param[key];
          const type = typeof element;
          if (element instanceof Array) {
            return key;
          } else if (type == 'object') {
            return key + '.' + this.getPathTrue(element, pathCur);
          } else {
            // return '';
          }
        }
      }
    },
    parseData() {
      const realList = this.parseList(this.data01, this.dataDesc.main_list);
      this.dataList = realList;
      if (realList.length > 0) {
        const descList = this.parseObj(realList[0], this.dataDesc.typeMap);
        this.dataDesc.item_desc = descList;
      }
    },
    parseList(fullData, listPath) {
      if (listPath) {
        let realList = [];
        let _tmp = fullData;
        const pathArray = listPath.split('.');
        pathArray.forEach(item => {
          _tmp = _tmp[item];
        });
        realList = _tmp;
        return realList;
      } else {
        return fullData;
      }
    },
    parseObj(singleData, typeMap) {
      let descList = [];
      for (const key in singleData) {
        if (Object.prototype.hasOwnProperty.call(singleData, key)) {
          const element = singleData[key];
          const type = typeof element;
          descList.push({
            name: key,
            type: typeMap[key] || type,
          });
        }
      }
      return descList;
    },
  },
  mounted() {
    // this.getData('/assets/policy.json');
  },
};
</script>

<style>
</style>